<template>
	<div class="theme">
		<router-view :key="key"></router-view>
		<van-tabbar v-model="active" route class="van-tabbar-bgColor" active-color="#22a0ff">
			<van-tabbar-item replace to="/">
				<span>云算池</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal">
			</van-tabbar-item>
			<van-tabbar-item replace to="/OTC">
				<span>OTC</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.normal2">
			</van-tabbar-item>
			<van-tabbar-item replace to="/Information">
				<span>发现</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active3 : icon.normal3">
			</van-tabbar-item>
			<van-tabbar-item replace to="/Mine">
				<span>我的</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active4 : icon.normal4">
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Index',
		components: {},
		props: {},
		data() {
			return {
				active: 0,
				icon: {
					normal: require('./../assets/images/a1.png'),
					active: require('./../assets/images/b1.png'),
					normal2: require('./../assets/images/a2.png'),
					active2: require('./../assets/images/b2.png'),
					normal3: require('./../assets/images/a3.png'),
					active3: require('./../assets/images/b3.png'),
					normal4: require('./../assets/images/a4.png'),
					active4: require('./../assets/images/b4.png')
				}
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {
			key() {
				return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
			}
		},
		methods: {},
		created() {},
		mounted() {},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.van-tabbar-item__icon img {
		height: 30px;
	}
	
	/deep/ .van-tabbar--fixed {
		background-color: #43add5;
	}
	
	/deep/ .van-tabbar-item--active {
		color: white;
		font-size: 14px;
		img {
			width: 90px;
		    height: auto;
		    margin-bottom: 45px;
		}
		.van-tabbar-item__text {
			position: absolute;
    		bottom: 3px;
		}
	}
	
	/deep/ .van-tabbar-item {
		color: white;
		font-size: 14px;
	}
	
	/deep/ .van-tabbar-item__icon {
		margin-bottom: 0px;
	}
	
	/deep/ .van-tabbar-item__text {
		color: white;
	}
	
	[class*=van-hairline]::after {
		border: 0;
	}
</style>